<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="./lib/esl.js"></script>
    <script src="./lib/config.js"></script>
    <script src="./lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
    h1 {
        line-height: 60px;
        height: 60px;
        background: #ddd;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }

    .chart {
        height: 500px;
    }
</style>

<h1>rainfall</h1>
<div class="chart" id="rainfall"></div>
<h1>zoom lock (only inside) | Should not prevent default when mouse wheel.</h1>
<div class="chart" id="zoom-lock"></div>
<h1>zoomOnMouseWheel: 'shift', moveOnMouseMove: 'alt' | Should not prevent default when mouse wheel.</h1>
<div class="chart" id="zoom-shift"></div>


<script>
    require([
        'data/rainfall.json',
        'echarts'
        // 'zrender/vml/vml',
        // 'echarts/chart/bar',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/tooltip',
        // 'echarts/component/grid',
        // 'echarts/component/axis',
        // 'echarts/component/dataZoomInside'
    ], function (data, echarts) {

        var chart = echarts.init(document.getElementById('rainfall'));

        var option = {
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['降水量', '流量']
            },
            grid: [
                {
                    show: true,
                    borderWidth: 0,
                    right: '15%',
                    bottom: '53%'
                },
                {
                    show: true,
                    borderWidth: 0,
                    right: '15%',
                    top: '53%'
                }
            ],
            xAxis: [
                {
                    // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
                    // data: xAxisData,
                    type: 'category',
                    boundaryGap: true,
                    // splitLine: {show: false},
                    axisLabel: {show: true},
                    splitLine: {show: false},
                    axisLine: {
                        show: true,
                        // onZero: false
                    },
                    data: data.category,
                    gridIndex: 0
                },
                {
                    // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
                    // data: xAxisData,
                    type: 'category',
                    boundaryGap: true,
                    axisLabel: {show: true},
                    splitLine: {show: false},
                    axisLine: {
                        show: true,
                    },
                    data: data.category,
                    gridIndex: 1
                }
            ],
            yAxis: [
                {
                    boundaryGap: false,
                    axisLabel: {},
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    },
                    gridIndex: 0
                },
                {
                    boundaryGap: false,
                    position: 'right',
                    inverse: true,
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    },
                    gridIndex: 1
                }
            ],
            series: [
                {
                    name: '降水量',
                    type: 'line',
                    data: data.rainfall,
                    itemStyle: {
                        normal: {
                            areaStyle: {}
                        }
                    },
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                },
                {
                    name: '流量',
                    type: 'line',
                    data: data.flow,
                    itemStyle: {
                        normal: {
                            areaStyle: {}
                        }
                    },
                    xAxisIndex: 1,
                    yAxisIndex: 1
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    xAxisIndex: [0, 1],
                    start: 30,
                    end: 40
                }
            ]
        };

        testHelper.createChart(echarts, 'rainfall', option);
    })
</script>


<script>
    require([
        'data/rainfall.json',
        'echarts'
        // 'zrender/vml/vml',
        // 'echarts/chart/bar',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/tooltip',
        // 'echarts/component/grid',
        // 'echarts/component/axis',
        // 'echarts/component/dataZoom'
    ], function (data, echarts) {

        var chart = echarts.init(document.getElementById('zoom-lock'));

        var option = {
            tooltip: {
                trigger: 'axis',
            },
            grid: [
                {
                    show: true,
                    borderWidth: 0
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    axisLabel: {show: true},
                    splitLine: {show: false},
                    data: data.category,
                    gridIndex: 0
                }
            ],
            yAxis: [
                {
                    boundaryGap: false,
                    axisLabel: {},
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    },
                    gridIndex: 0
                }
            ],
            series: [
                {
                    name: '降水量',
                    type: 'line',
                    data: data.rainfall,
                    itemStyle: {
                        normal: {
                            areaStyle: {}
                        }
                    },
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    zoomLock: true,
                    start: 30,
                    end: 40
                },
                {
                    type: 'slider',
                    start: 30,
                    end: 40
                },
                {
                    type: 'slider',
                    yAxisIndex: 0
                }
            ]
        };

        testHelper.createChart(echarts, 'zoom-lock', option);
    })
</script>


<script>
    require([
        'data/rainfall.json',
        'echarts'
        // 'zrender/vml/vml',
        // 'echarts/chart/bar',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/tooltip',
        // 'echarts/component/grid',
        // 'echarts/component/axis',
        // 'echarts/component/dataZoom'
    ], function (data, echarts) {

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            grid: [
                {
                    show: true,
                    borderWidth: 0
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    axisLabel: {show: true},
                    splitLine: {show: false},
                    data: data.category,
                    gridIndex: 0
                }
            ],
            yAxis: [
                {
                    boundaryGap: false,
                    axisLabel: {},
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    },
                    gridIndex: 0
                }
            ],
            series: [
                {
                    name: '降水量',
                    type: 'line',
                    data: data.rainfall,
                    itemStyle: {
                        normal: {
                            areaStyle: {}
                        }
                    },
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    zoomOnMouseWheel: 'shift',
                    moveOnMouseMove: 'alt',
                    start: 30,
                    end: 40
                },
                {
                    type: 'slider',
                    start: 30,
                    end: 40
                },
                {
                    type: 'slider',
                    yAxisIndex: 0
                }
            ]
        };

        testHelper.createChart(echarts, 'zoom-shift', option);
    })
</script>


</body>
</html>
